doctype html
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')
    link(rel='stylesheet' href='/stylesheets/mycss.css')
    link(rel='stylesheet' href='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css')
    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')
    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')
    script(src='/js/study_manage.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js')
    script(src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js')
    script(src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js')  
    script#table-template(type="text/x-handlebars-template").
      {{#each studies}}
        <tr class="success">
          <td>{{id}}</td>
          <td>{{uid}}</td>
          <td>{{name}}</td>
          <td>{{state}}</td>
          <td>{{contract_number}}</td>
          <td>{{type}}</td>
          {{#if due_date}}
          <td>{{due_date}}</td>
          {{^}}
          <td></td>
          {{/if}}
          <td>{{need_audit}}</td>
          <td>{{created_at}}</td>
          <td>{{updated_at}}</td>
          <td><button class="btn btn-primary btn-xs btn-block btn-upd" type="button" data-toggle="modal" data-target="#update" data-result='{"id":{{id}},"uid":"{{uid}}","name":"{{name}}","state":"{{state}}","contract_number":"{{contract_number}}","type":"{{type}}","due_date":"{{due_date}}","need_audit":"{{need_audit}}"}'>修改</button></td>
          <td><button class="btn btn-danger btn-xs btn-block btn-del" type="button" data-toggle="modal" data-target="#delete" data-id={{id}}>删除</button></td>
        </tr>
      {{/each}}
  body
    div.container
      //提示栏
      div.row.hidden
        div#banner-danger.alert.alert-danger.alert-dismissable 
          span 将返回信息显示在这里
          button.close(type="type" data-dismiss="alert" aria-hidden="true") &times;
      div.row.hidden
        div#banner-search.alert.alert-info.alert-dismissable 
          span 搜索结果如下：
          a(href="/study_manage" style="float:right") 返回搜索前的原始结果
      //标题和搜索框
      div.row
        ul.list-inline
          li.col-lg-3.nonpadding
            p.content-title=title
          li.col-lg-6.nonpadding
          li.float-right.col-lg-3.nonpadding
            div.input-group
              span.input-group-btn
                button.btn.btn-warning(type='button',data-toggle="modal",data-target="#add") 添加新项目
              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)
              span.input-group-btn
                button.btn.btn-warning.btn-search(type='button') 搜索
      //表格      
      div.row
        table.table
          thead
            tr
              th 序号
              th 项目uid
              th 项目名称
              th 项目状态
              th 病例数
              th 项目类型
              th 截止日期
              th 监察需求
              th 创建日期
              th 修改日期
              th 修改
              th 删除
          tbody
            each result in results.results
              tr
              each val in result
                td.success #{val}
              td.success 
                - var info = result
                button(type='button' class='btn btn-primary btn-xs btn-block btn-upd' data-result=info data-toggle="modal",data-target="#update") 修改
              td.success 
                - var id = result.id
                button(type='button' class='btn btn-danger btn-xs btn-block btn-del' data-id=id data-toggle="modal",data-target="#delete") 删除
      //分页
      div.row(style="text-align:center;")
        ul.pagination#pagination(style="margin:0 auto;")
          li.page(page="first")
            a &laquo;
          - for (var i = 1; i < results.page_num+1; i++)
            li.page(page=i): a #{i}
          li.page(page="last" page_max=results.page_num)
            a &raquo;
      //显示返回信息的模态框
      div.modal.fade#infoReturn(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 返回信息
            div.modal-body#infoBody 返回的提示信息
            div.modal-footer
              button.btn.btn-primary#btn-confirm(type='submit') 确认
      //修改项目信息的模态框
      div.modal.fade#update(tabindex='-1',role='dialog',aria-labelledby='updLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 修改项目信息
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 项目uid
                  div.col-sm-7
                    input.form-control#uid_upd(type='text',placeholder='请输入项目uid(必填)',value='')
                  div.col-sm-3
                    p#warning8(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目名称
                  div.col-sm-7
                    input.form-control#name_upd(type='text' placeholder='请输入项目名称(必填)',value='') 
                  div.col-sm-3
                    p#warning9(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目状态
                  div.col-sm-7
                    select.form-control#state_upd
                      option(value='INIT') INIT
                      option(value='ONGOING') ONGOING
                      option(value='LOCKED') LOCKED
                      option(value='COMPLETE') COMPLETE
                  div.col-sm-3
                    p#warning10(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 病例数
                  div.col-sm-7
                    input.form-control#contract_number_upd(type='text' placeholder='请输入病例数(必填)',value='')
                  div.col-sm-3
                    p#warning11(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目类型
                  div.col-sm-7
                    select.form-control#type_upd
                      option(value='随机对照试验(RCT)') 随机对照试验(RCT)
                      option(value='队列研究') 队列研究
                      option(value='病例对照研究') 病例对照研究
                      option(value='注册登记研究') 注册登记研究
                      option(value='复杂性疾病队列研究') 复杂性疾病队列研究
                      option(value='横断面研究') 横断面研究
                  div.col-sm-3
                    p#warning12(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 截止日期
                  div.col-sm-7
                    div.input-group.date#datetimepicker1
                      input.form-control#due_date_upd(type='text')
                      span.input-group-addon
                        span.glyphicon.glyphicon-calendar
                  script.
                    $(function() {
                      var cur = new Date();
                      $('#datetimepicker1').datetimepicker({
                        format:"YYYY/MM/DD"
                      });
                      $('#datetimepicker1').on("dp.change",function(e) {
                        $(this).data("DateTimePicker").minDate(cur);
                      });
                    });
                  div.col-sm-3
                    p#warning13(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 监察需求
                  div.col-sm-7
                    label.radio-inline
                      input(name='need_audit_upd' type="radio" value='true' checked) 
                      span 需要
                    label.radio-inline
                      input(name='need_audit_upd' type="radio" value='false') 
                      span 不需要
                  div.col-sm-3
                    p#warning14(style='color:#ff0000')
            div#id_upd(style="display:none") 存储待修改项的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-update(type='submit') 确认修改
            span#tips2
      //删除项目的模态框
      div.modal.fade#delete(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 删除项目
            div.modal-body#del_confirm 确认删除？
            div#del_id(style="display:none") 存储待删除的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-danger.btn-delete(type='submit') 确认删除
            span#tips1
      //添加项目的模态框
      div.modal.fade#add(tabindex='-1',role='dialog',aria-labelledby='addLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 添加新项目
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 项目uid
                  div.col-sm-7
                    input.form-control#uid(type='text',placeholder='请输入项目uid(必填)',value='')
                  div.col-sm-3
                    p#warning1(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目名称
                  div.col-sm-7
                    input.form-control#name(type='text' placeholder='请输入项目名称(必填)',value='') 
                  div.col-sm-3
                    p#warning2(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目状态
                  div.col-sm-7
                    select.form-control#state
                      option(value='INIT') INIT
                      option(value='ONGOING') ONGOING
                      option(value='LOCKED') LOCKED
                      option(value='COMPLETE') COMPLETE
                  div.col-sm-3
                    p#warning3(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 病例数
                  div.col-sm-7
                    input.form-control#contract_number(type='text' placeholder='请输入病例数(必填)',value='')
                  div.col-sm-3
                    p#warning4(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 项目类型
                  div.col-sm-7
                    select.form-control#type
                      option(value='随机对照试验(RCT)') 随机对照试验(RCT)
                      option(value='队列研究') 队列研究
                      option(value='病例对照研究') 病例对照研究
                      option(value='注册登记研究') 注册登记研究
                      option(value='复杂性疾病队列研究') 复杂性疾病队列研究
                      option(value='横断面研究') 横断面研究
                  div.col-sm-3
                    p#warning5(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 截止日期
                  div.col-sm-7
                    div.input-group.date#datetimepicker
                      input.form-control#due_date(type='text')
                      span.input-group-addon
                        span.glyphicon.glyphicon-calendar
                  script.
                    $(function() {
                      var cur = new Date();
                      $('#datetimepicker').datetimepicker({
                        format:"YYYY/MM/DD"
                      });
                      $('#datetimepicker').on("dp.change",function(e) {
                        $(this).data("DateTimePicker").minDate(cur);
                      });
                    });
                  div.col-sm-3
                    p#warning6(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 监察需求
                  div.col-sm-7
                    label.radio-inline
                      input(name='need_audit' type="radio" value='true' checked) 
                      span 需要
                    label.radio-inline
                      input(name='need_audit' type="radio" value='false') 
                      span 不需要
                  div.col-sm-3
                    p#warning7(style='color:#ff0000')
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-add(type='submit') 确认添加
            span#tips